<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">


    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>

</head>
<style>

</style>

<body>

<div id="app">


    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
              @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按书名搜索" value="name"></el-option>
        <el-option label="按作者搜索" value="author"></el-option>
        <el-option label="按分类搜索" value="type"></el-option>
        <el-option label="按图书号搜索" value="card"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <el-table style="padding: 20px"
              :data="tableData"
              stripe

    >


        <!--          图书分类名称）-->
        <el-table-column
                prop="name"
                label="图书名"
        >
        </el-table-column>
        <el-table-column
                prop="card"
                label="图书号"
        >
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者"
        >
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
        >
        </el-table-column>
        <el-table-column
                prop="press"
                label="出版社"
        >
        </el-table-column>

        <el-table-column
                prop="type"
                label="分类类型"
        >
        </el-table-column>

        <el-table-column label="状态">
            <template slot-scope="scope">
                <!-- 根据 status 的值动态渲染不同的内容 -->
                <span v-if="scope.row.status === 2">未借出</span>
                <span v-else>借阅中</span>
            </template>

        </el-table-column>


        <el-table-column
                label="操作"
                width="160"
                align="center"
        >
            <template slot-scope="scope">
                <el-button
                        type="text"
                        size="small"
                        class="blueBug"
                        @click="borrowBook(scope.row)"
                >
                    借阅
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--    class="pageList"-->
    <el-pagination

            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>


</div>

</body>

<script>

    let myVue = new Vue({
        el: '#app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                status: '',
                searchText: '',
                searchType: 'name',

            }
        },
        computed: {},
        created() {
            this.init()
            //this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
        },
        methods: {
            async init() {


                let params = {
                    page: this.page,
                    pageSize: this.pageSize
                };

                // 根据搜索类型设置请求参数
                if (this.searchText) {
                    if (this.searchType === 'name') {
                        params.name = this.searchText;
                    } else if (this.searchType === 'author') {
                        params.author = this.searchText;
                    } else if (this.searchType === 'type') {
                        params.type = this.searchText;
                    } else if (this.searchType === 'card') {
                        params.card = this.searchText;
                    }
                }
                //按照分类搜索

                axios.get("/book_info/page", {params})
                    .then(res => {
                        this.tableData = res.data.data.records;
                        this.counts = res.data.data.total;
                    })
            },
            handleSearch() {
                this.page = 1; // 重置页码为1
                this.init(); // 执行搜索操作
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            borrowBook(row) {
                console.log(row)
                if (row.status === 1){
                    this.$confirm('该图书正在借阅中，无法执行该操作', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
                }else {
                    this.showBorrowDialog(row);
                }
            },
            showBorrowDialog(book) {
                this.$prompt('请输入借阅天数', '借阅', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\d+$/,
                    inputErrorMessage: '请输入数字',
                    inputValue: '30'
                }).then(({ value }) => {
                    // 用户点击了确定按钮
                    // value 即为用户输入的借阅天数
                    this.borrowBook111(book, value);
                }).catch(() => {
                    // 用户点击了取消按钮
                    // 可以不做任何操作
                });
            },
            borrowBook111(book, days) {
                const currentTime = new Date();

                // 将天数转换为毫秒数
                const millisecondsInADay = 1000 * 60 * 60 * 24;
                const totalMilliseconds = days * millisecondsInADay;

                // 计算结束时间
                const endTime1 = new Date(currentTime.getTime() + totalMilliseconds);

                const Info = {
                    bid:book.bid,
                    card:book.card,
                    bookName:book.name,
                    beginTime:currentTime,
                    endTime:endTime1
                };

                axios.post('/book_his', Info, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        // 请求成功的处理逻辑
                        if (response.data.code === 1) {
                            this.$message.success('借阅成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error(response.data.msg || '操作失败')
                        }
                    })


            }
        }
    })


</script>


</html>